var React = require('react');
var Layout = require('../../controls/Layout');
var ListView = require('../../controls/ListView');
var TableInfoView = require('./TableInfoView');
var DBService = require('./DBService');
module.exports = React.createClass({
	getInitialState: function () {
		return {
			tables: []
		}
	},
	componentDidMount:function(){
		var _self = this;
		DBService.showTables().then(function (data){
			//var _ds = JSON.parse(data.result);
			var _data = [], _obj;
			for(var key in data.rows){
				_obj = data.rows[key];
				for(var _key in _obj){
					_data.push({ text: _obj[_key] });
				}
			}
			_self.setState({
				tables: _data
			});
		});
	},
	render:function(){
		return (
			<Layout
				begin={200}
				style={{border:'1px solid #3FA9F5'}}
				bStyle={{borderLeft: '1px solid #3FA9F5'}}
				direction="H">
				<ListView
					onClick={(item)=>this.setState({ currTable: item.text })}
					itemRender={(item)=>{ return <span>{item.text}</span>;}}
					data={this.state.tables} />
				<TableInfoView table={this.state.currTable} />
			</Layout>
		);
	}
});
